<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志查看器</title>
    <link rel="stylesheet" type="text/css" href="{{ lib('layui/css/layui.css') }}">
    <script src="{{ lib('jquery/jquery-3.1.0.min.js') }}?v=v1.12.4"></script>
    <script type="text/javascript" src="{{ lib('layui/layui.js') }}?v=v2.9.4 "></script>
    <style>
        :root {
            --bg-color: #ffffff;
            --text-color: #333;
            --primary-color: #4285f4;
            --secondary-color: #f1f1f1;
            --border-color: #ddd;
            --highlight-color: #ffff99;
            --active-color: #e0e0e0;
            --file-info-color: #777;
        }

        .theme-dark {
            --bg-color: #1e1e1e;
            --text-color: #e0e0e0;
            --primary-color: #5c9eff;
            --secondary-color: #2d2d2d;
            --border-color: #444;
            --highlight-color: #3a3a00;
            --active-color: #333;
            --file-info-color: #aaa;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--bg-color);
            color: var(--text-color);
        }

        .log-container {
            min-height: 100vh;
        }

        .directory-nav, .file-list {
            background-color: var(--bg-color);
            padding: 15px;
            overflow-y: auto;
            border-right: 1px solid var(--border-color);
        }

        .log-content {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
        }

        .directory-nav h2, .file-list h2 {
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .directory-nav ul, .file-list ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .directory-nav li, .file-list li {
            padding: 15px 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .directory-nav a, .file-list a {
            color: var(--text-color);
            text-decoration: none;
            display: block;
        }

        .directory-nav li.active, .file-list li.active {
            background-color: var(--active-color);
        }

        .file-info {
            display: block;
            font-size: 0.8em;
            color: var(--file-info-color);
        }

        .log-toolbar {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .search-form, .refresh-form {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 10px;
        }

        .search-form input[type="text"],
        .search-form input[type="number"],
        .refresh-form input[type="number"] {
            padding: 5px;
            border: 1px solid var(--border-color);
            background-color: var(--bg-color);
            color: var(--text-color);
        }

        button {
            padding: 5px 10px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
        }

        .clear-search {
            color: var(--primary-color);
            font-size: 0.9em;
        }

        .settings {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .theme-switcher a {
            padding: 5px 10px;
            margin-left: 5px;
            background-color: var(--secondary-color);
            color: var(--text-color);
            text-decoration: none;
        }

        .theme-switcher a.active {
            background-color: var(--primary-color);
            color: white;
        }

        .log-display pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            margin: 0;
        }

        .highlight {
            background-color: var(--highlight-color);
            transition: background-color 1s;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .log-container {
                flex-direction: column;
            }

            .directory-nav, .file-list {
                width: auto;
                max-height: 200px;
            }

            .directory-nav {
                order: 1;
            }

            .log-content {
                order: 3;
            }

            .file-list {
                order: 2;
            }
        }
    </style>
</head>
<body class="theme-{{ theme }}">

<div class="log-container">
    <div class="layui-row">
        <div class="layui-col-md2">
            <div class="directory-nav">
                <h2>日志目录</h2>
                {% for key,item in directories %}
                    <h3 style="padding-right: 30px;padding-top: 10px;text-align: center">{{ key }}</h3>
                    <hr/>
                    <ul style="padding-left: 20px;text-align: center">
                        {% for dir in item %}
                            {% set path = key~'/'~dir %}
                            <li class="{{ current_dir == path ? 'active' : '' }}">
                                <a href="?dir={{ key }}/{{ dir|url_encode }}&theme={{ theme }}">{{ dir ?: '根目录' }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endfor %}
            </div>
        </div>
        <div class="layui-col-md2">
            <!-- 文件列表 -->
            <div class="file-list">
                <ul>
                    {% for file in files %}
                        <li class="{{ current_file == file.name ? 'active' : '' }}" style="text-align: left">
                            <a href="?dir={{ current_dir|url_encode }}&file={{ file.name }}&theme={{ theme }}">
                                {{ file.name }}
                                <span class="file-info">{{ file.size }} - {{ file.modified }}</span>
                            </a>
                        </li>
                    {% else %}
                        <li>没有找到日志文件</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="layui-col-md8">
            <!-- 日志内容 -->
            <div class="log-content">
                <div class="log-toolbar">
                    <form method="get" class="search-form">
                        <input type="hidden" name="dir" value="{{ current_dir }}">
                        <input type="hidden" name="file" value="{{ current_file }}">
                        <input type="hidden" name="theme" value="{{ theme }}">

                        <input type="text" name="search" placeholder="搜索关键词..." value="{{ search_term }}">
                        <label>上下文行数:
                            <input type="number" name="context" min="1" max="20" value="{{ context_line }}">
                        </label>
                        <button type="submit">搜索</button>
                        {% if search_term %}
                            <a href="?dir={{ current_dir|url_encode }}&file={{ current_file|url_encode }}&theme={{ theme }}"
                               class="clear-search">清除搜索</a>
                        {% endif %}
                    </form>

                    <div class="settings">
                        <form method="get" class="refresh-form">
                            <input type="hidden" name="dir" value="{{ current_dir }}">
                            <input type="hidden" name="file" value="{{ current_file }}">
                            <input type="hidden" name="search" value="{{ search_term }}">
                            <input type="hidden" name="context" value="{{ context_line }}">
                            <input type="hidden" name="theme" value="{{ theme }}">

                            <label>自动刷新(秒):
                                <input type="number" name="auto_refresh" min="0" max="60" value="{{ auto_refresh }}">
                            </label>
                            <button type="submit">应用</button>
                        </form>

                        <div class="theme-switcher">
                            <a href="?dir={{ current_dir|url_encode }}&file={{ current_file|url_encode }}&search={{ search_term|url_encode }}&context={{ context_line }}&theme=light"
                               class="{{ theme == 'light' ? 'active' : '' }}">明亮</a>
                            <a href="?dir={{ current_dir|url_encode }}&file={{ current_file|url_encode }}&search={{ search_term|url_encode }}&context={{ context_line }}&theme=dark"
                               class="{{ theme == 'dark' ? 'active' : '' }}">深色</a>
                        </div>
                    </div>
                </div>

                <div class="log-display" id="log-display" data-file="{{ current_file }}"
                     data-last-modified="{{ file_modified_time }}" data-last-checked="{{ last_checked }}">
                    {% if current_file %}
                        <pre id="log-content" class="layui-code code-demo">{{ log_content }}</pre>
                    {% else %}
                        <p>请从选择一个日志文件</p>
                    {% endif %}
                </div>
            </div>
        </div>

    </div>


</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const logDisplay = document.getElementById('log-display');
        const autoRefreshInput = document.querySelector('input[name="auto_refresh"]');
        let refreshInterval = null;

        // 初始化自动刷新
        setupAutoRefresh();

        // 监听自动刷新输入变化
        autoRefreshInput.addEventListener('change', setupAutoRefresh);

        function setupAutoRefresh() {
            const refreshSeconds = parseInt(autoRefreshInput.value);

            // 清除现有定时器
            if (refreshInterval) {
                clearInterval(refreshInterval);
            }

            // 设置新的定时器
            if (refreshSeconds > 0) {
                refreshInterval = setInterval(checkForUpdates, refreshSeconds * 1000);
            }
        }

        function checkForUpdates() {
            const filePath = logDisplay.dataset.file;

            if (!filePath) return;

            $.ajax({
                url: window.location.href
            }).then(res => {
                $('#log-content').html(res);
                layui.code({
                    elem: '.code-demo',
                    theme: '{{ theme }}'
                });
            })
        }

        // 高亮搜索关键词
        if (logDisplay && logDisplay.querySelector('pre')) {
            const searchTerm = new URLSearchParams(window.location.search).get('search');
            if (searchTerm) {
                const logContent = logDisplay.querySelector('pre');
                const content = logContent.innerHTML;
                const highlighted = content.replace(
                    new RegExp(searchTerm, 'gi'),
                    match => `<span class="highlight">${match}</span>`
                );
                logContent.innerHTML = highlighted;
            }
        }
    });
</script>
<script>
    layui.use(function () {
        // code
        layui.code({
            elem: '.code-demo',
            theme: '{{ theme }}'
        });
    })
</script>
</body>
</html>